import Base from "../base.js";
import movieService from "../../service/movieService.js";

export default class extends Base {

    constructor(props) {
        super(props);
        this.movie = movieService.getMovie();
    }

    render() {
        const template = `
        <table class="layui-table">
            <colgroup>
              <col width="150">
              <col width="200">
              <col>
            </colgroup>
            <thead>
              <tr>
                <th>编号</th>
                <th>电影名</th>
                <th>英文名</th>
                <th>类型</th>
                <th>首映地址</th>
                <th>电影状态</th>
                <th>上映时间</th>
                <th>评分</th>
                <th>票房</th>
                <th>导演</th>
                <th>演员</th>
                <th>剧情简介</th>
              </tr> 
            </thead>
            <tbody>
              <tr>
                <td>${this.movie._id}</td>
                <td>${this.movie.cname}</td>
                <td>${this.movie.ename}</td>
                <td>${this.movie.type}</td>
                <td>${this.movie.area}</td>
                <td>${this.movie.status=="0"?"热映":(this.movie.status=="1"?"经典":"即将")}</td>
                <td>${this.movie.upDate}</td>
                <td>${this.movie.score}</td>
                <td>${this.movie.number}</td>
                <td>${this.movie.count}</td>
                <td>${this.movie.director}</td>
                <td>${this.movie.actor}</td>
                <td>${this.movie.intro}</td>
              </tr>
            </tbody>
        </table>
        <div class="layui-form-item">
            <div class="layui-input-inline" style="width:100px;">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" id="posterUpload">
                <i class="layui-icon">&#xe67c;</i>上传海报
            </button>
            </div>
            <div class="layui-input-inline" style="width:100px;">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" id="chaUpload">
                <i class="layui-icon">&#xe67c;</i>上传照片
            </button>
            </div>
            <div class="layui-input-inline" style="width:100px;">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" id="imgsUpload">
                <i class="layui-icon">&#xe67c;</i>上传剧照
            </button>
            </div>
        </div>
        <div class="images-wrap">
            <h2>海报</h2>
            <div class="poster-wrap" style="height:300px">
            </div>
            <h2>人物照片</h2>
            <div class="cha-wrap" style="height:300px">
            </div>
            <h2>剧照</h2>
            <div class="imgs-wrap" style="height:300px">
            </div>
        </div>
        `
        this.$el.html(template);
        this.rerender();
    }

    getMovieImg() {
        let imgs = this.movie.poster.reduce((pre, i) => {
            return pre + `<img style="width: 200px;margin-right:20px" class="poster" src="${i}" alt="">`
        }, "");
        $(".poster-wrap").html(imgs);
        imgs = this.movie.chaImgs.reduce((pre, i) => {
            return pre + `<img style="width: 200px;margin-right:20px" class="chaImgs" src="${i}" alt="">`
        }, "");
        $(".cha-wrap").html(imgs);
        imgs = this.movie.images.reduce((pre, i) => {
            return pre + `<img style="width: 200px;margin-right:20px" class="images" src="${i}" alt="">`
        }, "");
        $(".imgs-wrap").html(imgs);
    }

    // banUpload() {
    //     $("#posterUpload").addClass("layui-btn-disabled");
    //     $("#posterUpload").attr("disabled", true);
    // }

    rerender() {
        if (this.movie.poster.length < 1) {
            $("#posterUpload").removeClass("layui-btn-disabled");
            $("#posterUpload").attr("disabled", false);
        } else {
            $("#posterUpload").addClass("layui-btn-disabled");
            $("#posterUpload").attr("disabled", true);
        }
    }

    handle() {
        const that = this;
        //上传海报
        if (this.movie.poster.length < 1) {
            this.upload.render({
                elem: '#posterUpload', //绑定元素
                url: '/movies/posterUpload', //上传接口
                headers: {
                    Authorization: `Bearer ${window.localStorage.getItem('_token')}`
                },
                multiple: true,
                data: {
                    _id: this.movie._id
                },
                done: function (res) {
                    //上传完毕回调
                    that.movie = res;
                    movieService.setMovie(that.movie);
                    that.getMovieImg();
                    that.rerender();
                },
                error: function () {
                    //请求异常回调
                }
            });
        }
        //上传照片
        this.upload.render({
            elem: '#chaUpload', //绑定元素
            url: '/movies/chaUpload', //上传接口
            multiple:true,
            headers: {
                Authorization: `Bearer ${window.localStorage.getItem('_token')}`
            },
            multiple: true,
            data: {
                _id: this.movie._id
            },
            done: function (res) {
                //上传完毕回调
                that.movie = res;
                movieService.setMovie(that.movie);
                that.getMovieImg();
                that.rerender();

            },
            error: function () {
                //请求异常回调
            }
        });
        //上传剧照
        this.upload.render({
            elem: '#imgsUpload', //绑定元素
            url: '/movies/imgsUpload', //上传接口
            multiple:true,
            headers: {
                Authorization: `Bearer ${window.localStorage.getItem('_token')}`
            },
            multiple: true,
            data: {
                _id: this.movie._id
            },
            done: function (res) {
                //上传完毕回调
                that.movie = res;
                movieService.setMovie(that.movie);
                that.getMovieImg();
                that.rerender();
            },
            error: function () {
                //请求异常回调
            }
        });


        $(".images-wrap").on("click", "img", function () {
            const src = $(this).attr("src");
            const clazz = $(this).attr("class");
            const _id = that.movie._id;
            that.deleteMovieImg(_id,{[clazz]: src});
        })
    }

    async deleteMovieImg(_id, src) {
        const data = await movieService.deleteMovieImg(_id, src);
        this.movie = data;
        movieService.setMovie(this.movie);
        this.getMovieImg();
        this.rerender();
    }


    mounted() {
        this.getMovieImg();
    }
}